<template>
	<div :class="clsx('tag-checked', className)">
		<a-checkable-tag v-for="(item) in tagsData" :key="item.value" @change="handleChange"
			v-model:checked="selectTags[item.value]" :bordered="props.type !== 'week'">
			{{ item.label }}
		</a-checkable-tag>
	</div>
</template>
<script lang="ts" setup>
import { useCustomForm } from '@/hooks';
import type { Option } from '@/types';
import clsx from 'clsx';
import { reactive, ref, watch } from 'vue';

const field = useCustomForm();

interface Props {
	className?: string;
	options: Array<{
		label: string;
		value: string;
	}>
	value?: Array<string>;
	type?: 'week' | 'month'
}
const props = defineProps<Props>();

const emit = defineEmits(['update:value']);

const tagsData = ref<Option[]>([]);
const selectTags = reactive<Record<string, boolean>>({});

watch(() => props.options, (val) => {
	if (val.length) {
		tagsData.value = val;
		const newTag = props.options.reduce((json: Record<string, any>, curr) => {
			json[curr.value] = false;
			return json;
		}, {})
		Object.assign(selectTags, newTag)
	}
}, {
	immediate: true
});


const handleChange = () => {
	emit('update:value', Object.keys(selectTags).filter((key) => !!selectTags[key]));
	field.onFieldChange();
};

watch(() => props.value, (values) => {
	if (values) {
		if (values.length) {
			for (const item of values) {
				selectTags[item] = true;
			}
		} else {
			for (const key of Object.keys(selectTags)) {
				selectTags[key] = false;
			}
		}
	}
}, {
	immediate: true
});

</script>

<style lang="less" scoped>
.tag-checked {
	:deep(.ant-tag) {
		padding: 5px 10px;
		border: 1px solid #d9d9d9;
		// border-radius: unset;

		// &:not(:first-of-type) {
		// 	border-left: none;
		// }

		// &:not(:first-of-type) {
		// 	border-radius: unset;
		// }

		// &:first-of-type {
		// 	border-radius: unset;
		// }

	}
}
</style>
